<!doctype html>
<html class="no-js" lang="en">

<!-- Mirrored from creatively.equiet.sk/blogpost.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:04 GMT -->
<head>
	<meta charset="utf-8">

	<!-- Page title -->
	<title>Creatively Site Template</title>

	<!-- Page icon -->
	<link rel="shortcut icon" href="favicon.png">

	<!-- Stylesheet -->
	<link rel="stylesheet" href="css/style.css">
	
	<!-- Nivo Slider stylesheet -->
	<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
	
	<!-- Fancybox stylesheet -->
	<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

	<!-- Modernizr which enables HTML5 elements & feature detects -->
	<script src="js/libs/modernizr-1.7.min.js"></script>
		
	<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
	

	<!-- Customization -->
	<style type="text/css">
		#customization {
			background-color: rgba(255,255,255,0.9);
			width: 156px;
			position: fixed;
			top: 50%;
			margin: -270px 0 0 10px;
			z-index: 100;
			-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
			-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
		}
			.no-rgba #customization {
				background-color: #fff;
			}
			#customization section, #customization .hide {
				background-color: #fff;
				padding: 10px;
				margin: 5px;
				-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
				-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); box-shadow: 0px 0px 2px rgba(0,0,0,0.7);
			}
				#customization .hide {
					display: block;
					float: right;
					width: auto;
				}
				#customization h2 {
					font-family: "Droid Sans", Arial, sans-serif;
					font-style: normal;
					font-size: 13px;
					font-weight: bold;
					line-height: 20px;
					background: none;
					padding: 0;
				}
				#customization a {
					display: inline-block;
					width: 16px;
					height: 16px;
					margin: 1px;
					float: left;
				}
					#customization .selected {
						-moz-box-shadow: 0px 0px 3px #000; -webkit-box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000;
						margin: 0;
						border: 1px solid #ccc;
					}				
	</style>

</head>
 

<body>

<!-- Wrapper begin --><div id="wrapper" class="clearfix">

<!-- Header -->
<header>
	<div class="container_12">
		<h1 class="grid_4"><a href="index-2.html">Creatively</a></h1>
		<nav class="grid_8">
			<ul class="right">
				<li>
					<a href="index-2.html">Home</a>
					<ul>
						<li><a href="index-2.html">Standard</a></li>
						<li><a href="index_2.html">Nivo Slider</a></li>
					</ul>
				</li>
				<li>
					<a href="about.html">About</a>
					<ul>
						<li><a href="about.html">About</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</li>
				<li>
					<a href="services.html">Services</a>
				</li>
				<li>
					<a href="portfolio.html">Portfolio</a>
					<ul>
						<li><a href="portfolio.html">4 columns</a></li>
						<li><a href="portfolio_2.html">3 columns</a></li>
						<li><a href="portfolio_3.html">1 column</a></li>
					</ul>
				</li>
				<li class="selected">
					<a href="blog.html">Blog</a>
					<ul>
						<li><a href="blog.html">Blog 1</a></li>
						<li><a href="blog_2.html">Blog 2</a></li>
						<li><a href="blogpost.html">Blogpost</a></li>
					</ul>
				</li>
				<li>
					<a href="pricing_boxes.html">Pages</a>		
					<ul>
						<li><a href="pricing_boxes.html">Pricing boxes</a></li>
						<li><a href="pricing_table.html">Pricing table</a></li>
						<li><a href="eshop.html">E-shop</a></li>
						<li><a href="typography.html">Typography</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</header>

<!-- Container begin --><div class="container_12">

<!-- MAIN CONTENT BEGIN -->

 <!-- Page title -->
<section id="title">

	<!-- Blog title -->
	<h1 class="grid_5">Blog <span>Blogpost</span></h1>
	
	<!-- Blog stats -->
	<div class="blog_stats grid_7">
		<div class="article_stats">
			<span>November 14, 2011</span>
			<span><a href="#"><strong>2</strong> comments</a></span>
			<span>in <a href="#"><strong>Life</strong></a>, <a href="#"><strong>Technology</strong></a></span>
		</div>
	</div>
		
</section>

<!-- Sidebar -->
<section class="sidebar grid_4">

	<!-- About the author -->
	<h3>Author</h3>
	<section class="author">
		<div class="float"><a href="blogpost.html"><img src="img/placeholders/64x64/user_1.jpg" alt="" class="shadow" /></a></div>
		<h3><a href="blogpost.html">John Smith</a></h3>
		<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
	</section>
	
	<!-- Search -->
	<h3>Search</h3>
	<form action="#" class="search_form">
		<input type="text" placeholder="Enter keywords" />
		<input type="submit" value="Search" class="button_grey" />
	</form>
	
	<!-- Categories -->
	<h3>Categories</h3>
	<ul class="categories">
		<li><a href="#">Category <span>(2)</span></a></li>
		<li class="selected"><a href="#">Lorem ipsum <span>(3)</span></a></li>
		<li><a href="#">Praesent metus <span>(1)</span></a></li>
		<li><a href="#">Pellentesque <span>(5)</span></a></li>
	</ul>
	
	<!-- Archive -->
	<h3>Archive</h3>
	<ul class="categories">
		<li><a href="#">May <span>2011</span></a></li>
		<li><a href="#">June <span>2011</span></a></li>
		<li class="selected"><a href="#">July <span>2011</span></a></li>
		<li><a href="#">August <span>2011</span></a></li>
	</ul>
	
	<!-- Popular posts -->
	<h3>Popular posts</h3>
	<ul class="popular_posts">
		<li>
			<h4><a href="blogpost.html">Blogpost</a></h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna...</p>
		</li>
		<li>
			<h4><a href="blogpost.html">Blogpost about something else</a></h4>
			<p>Phasellus dictum elit at arcu condimentum sit amet elementum felis sollicitudin...</p>
		</li>
	</ul>
	
</section>

<!-- Article -->
<article class="blogpost grid_8">
	
	<img src="img/placeholders/614x174/1.jpg" alt="" class="shadow" />
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	<p>Integer congue, erat id lobortis rutrum, libero dolor cursus nibh, vel volutpat lectus sem vulputate nisi.</p>
	<p>Phasellus dictum elit at arcu condimentum sit amet elementum felis sollicitudin. Sed at dolor vitae dolor condimentum interdum. Pellentesque faucibus commodo gravida.</p>
	<p>Donec accumsan, diam vitae pulvinar imperdiet, turpis lectus malesuada nisi, at aliquam odio arcu at lacus. Pellentesque consequat rutrum imperdiet. Sed in elit aliquet nisi consequat consequat. Nulla purus diam, faucibus et malesuada eu, congue eu nulla.</p>
	<p>Cras a purus diam. Pellentesque nibh ipsum, faucibus at feugiat eget, porttitor sed ipsum. Etiam vulputate nisi a risus mattis vitae cursus nisl varius. In vulputate quam a lectus bibendum faucibus. Sed sollicitudin, erat quis placerat consectetur, nisi massa commodo nisi, at porttitor lacus metus in odio. Integer sit amet tortor sit amet justo aliquam sagittis sed eu est. </p>
	<p>Vivamus eu felis lorem, ut porta quam. Morbi volutpat sodales dui, et convallis ligula pretium vel. Pellentesque massa massa, condimentum vitae aliquet fringilla, placerat et purus. Curabitur sodales quam at elit faucibus eget tincidunt lacus hendrerit.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas quam ante, dignissim at accumsan eget, lobortis dictum magna. Etiam pulvinar, mauris ac egestas molestie, erat dolor iaculis lectus, a luctus urna eros at est. </p>
	<p>Aenean nisi erat, rutrum a bibendum sit amet, pharetra in ante. Maecenas eget pretium lorem. Etiam eget dolor eros, ac adipiscing lorem. Fusce at velit nisl. Ut metus sem, eleifend vitae malesuada quis, faucibus vel erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent lobortis varius quam, non laoreet libero cursus nec. </p>
	<p>Maecenas feugiat placerat mattis. Aliquam ultrices lectus id lacus mollis sed sagittis nibh consectetur. Sed ullamcorper molestie faucibus. Nunc dignissim blandit hendrerit. Vestibulum dui nisi, molestie sit amet cursus non, porta vitae orci. Nunc sed nisi justo, ut dapibus elit.</p>
	
</article>

<!-- Comments -->
<section class="comments grid_8">
	
	<!-- Title -->
	<h3>Comments</h3>
	
	<!-- Comment -->
	<div class="comment clearfix">
		<div class="float"><img src="img/placeholders/34x34/user_1.jpg" alt="" class="shadow" /></div>
		<h4>Jane Doe</h4>
		<span class="time">Semptember 9, 2011</span>
		<a href="#" class="reply">Reply</a>
		<p>Aenean nisi erat, rutrum a bibendum sit amet, pharetra in ante. Maecenas eget pretium lorem. Etiam eget dolor eros, ac adipiscing lorem. Fusce at velit nisl. Ut metus sem, eleifend vitae malesuada quis, faucibus vel erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent lobortis varius quam, non laoreet libero cursus nec. </p>
	</div>
	
	<!-- Reply to comment -->
	<div class="comment comment_reply clearfix">
		<div class="float"><img src="img/placeholders/34x34/user_2.jpg" alt="" class="shadow" /></div>
		<h4>John Smith</h4>
		<span class="time">Semptember 9, 2011</span>
		<a href="#" class="reply">Reply</a>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	</div>
	
	<!-- Comment -->
	<div class="comment clearfix">
		<div class="float"><img src="img/placeholders/34x34/user_3.jpg" alt="" class="shadow" /></div>
		<h4>John Doe</h4>
		<span class="time">Semptember 7, 2011</span>
		<a href="#" class="reply">Reply</a>
		<p>Integer congue, erat id lobortis rutrum, libero dolor cursus nibh, vel volutpat lectus sem vulputate nisi.</p>
	</div>
	
</section>

<!-- Add a comment -->
<section class="add_comment grid_8">
	
	<!-- Title -->
	<h3>Add a comment</h3>
	
	<!-- Form -->
	<form action="#" class="add_comment">
		<input type="text" placeholder="Your name" />
		<input type="email" placeholder="Your e-mail"  />
		<div class="textarea"><textarea name="text" cols="30" rows="10"></textarea></div>
		<input type="submit" class="button_grey" value="Add a comment" />
	</form>
	
</section>

<div class="clearfix"></div>
 

<!-- MAIN CONTENT END -->

<!-- Container end --></div>

<!-- Wrapper end --></div>

<!-- Footer -->
<footer>
	<div class="container_12">
		<div class="social grid_2">
			<h6>Social</h6>
			<p>
				<a href="#"><img src="img/icons/rss_square.png" alt="RSS" /></a>
				<a href="#"><img src="img/icons/social_facebook.png" alt="Facebook" /></a>
				<a href="#"><img src="img/icons/social_linked_in.png" alt="Linked in" /></a>
				<a href="#"><img src="img/icons/social_twitter.png" alt="Twitter" /></a>
				<a href="#"><img src="img/icons/social_flickr.png" alt="Flickr" /></a>
			</p>
		</div>
		<div class="links grid_6">
			<h6>Links</h6>
			<p>
				<a href="#">Home</a>
				<a href="#">About us</a>
				<a href="#">Contact</a>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pages</a>
			</p>
		</div>
		<div class="copyright grid_4">
			<h6><a href="#">Creatively</a></h6>
			<p>&copy; 2011 Company name. All rights reserved.</p>
		</div>
	</div>
</footer>
	
<!-- Load main script -->
<script src="js/script.js"></script>

<!-- Load Nivo Slider -->
<script src="js/libs/jquery.nivo.slider.pack.js"></script>

<!-- Load Fancybox -->
<script src="js/libs/jquery.fancybox-1.3.4.pack.js"></script>

<!-- Load Twitter news stream -->
<script src="js/libs/jquery.tweet.js"></script>


<!-- Customization -->
<div id="customization">

	<a href="#" class="hide"><img src="img/hide.png" alt="" /></a>
	
	<div class="options float">
	
		<section class="header_color clearfix">
			<h2>Header pattern</h2>
			<div class="header_white">
				<a href="#" data-src="light_honeycomb.png"></a>
				<a href="#" data-src="little_pluses.png"></a>
				<a href="#" data-src="45degreee_fabric.png"></a>
				<a href="#" data-src="60degree_gray.png"></a>	
				<a href="#" data-src="beige_paper.png"></a>
				<a href="#" data-src="bright_squares.png"></a>
				<a href="#" data-src="brushed_alu.png"></a>
				<a href="#" data-src="concrete_wall_2.png"></a>
				<a href="#" data-src="concrete_wall_3.png"></a>
				<a href="#" data-src="white_sand.png"></a>
				<a href="#" data-src="vichy.png"></a>
				<a href="#" data-src="wavecut.png"></a>
				<a href="#" data-src="white_carbon.png"></a>
				<a href="#" data-src="rockywall.png"></a>
				<a href="#" data-src="smooth_wall.png"></a>
				<a href="#" data-src="noisy.png"></a>
				<a href="#" data-src="old_mathematics.png"></a>
				<a href="#" data-src="paper_1.png"></a>
				<a href="#" data-src="paper_2.png"></a>
				<a href="#" data-src="paper_3.png"></a>
				<a href="#" data-src="pinstripe.png"></a>
				<a href="#" data-src="leather_1.png"></a>
				<a href="#" data-src="cork_1.png"></a>
				<a href="#" data-src="double_lined.png"></a>
				<a href="#" data-src="exclusive_paper.png"></a>
				<a href="#" data-src="fabric_1.png"></a>
				<a href="#" data-src="soft_wallpaper.png"></a>
				<a href="#" data-src="subtle_freckles.png"></a>
				<a href="#" data-src="subtle_orange_emboss.png"></a>
				<a href="#" data-src="green_gobbler.png"></a>
				<a href="#" data-src="grunge_wall.png"></a>
				<a href="#" data-src="handmadepaper.png"></a>
			</div>
			<div class="header_black">
				<a href="#" data-src="always_grey.png"></a>
				<a href="#" data-src="brushed_alu_dark.png"></a>
				<a href="#" data-src="padded.png"></a>
				<a href="#" data-src="gray_sand.png"></a>
				<a href="#" data-src="crossed_stripes.png"></a>
				<a href="#" data-src="green-fibers.png"></a>
				<a href="#" data-src="tactile_noise.png"></a>
				<a href="#" data-src="black_denim.png"></a>
				<a href="#" data-src="black-Linen.png"></a>
				<a href="#" data-src="blackmamba.png"></a>
				<a href="#" data-src="carbon_fibre.png"></a>
				<a href="#" data-src="dark_stripes.png"></a>
				<a href="#" data-src="darth_stripe.png"></a>
				<a href="#" data-src="concrete_wall.png"></a>
				<a href="#" data-src="black_paper.png"></a>
				<a href="#" data-src="micro_carbon.png"></a>
				<a href="#" data-src="random_grey_variations.png"></a>
				<a href="#" data-src="wood_1.png"></a>
			</div>
		</section>
		
		<section class="showcase_color clearfix">
			<h2>Showcase pattern</h2>
			<a href="#" data-src="light_honeycomb.png"></a>
			<a href="#" data-src="little_pluses.png"></a>
			<a href="#" data-src="45degreee_fabric.png"></a>
			<a href="#" data-src="60degree_gray.png"></a>	
			<a href="#" data-src="beige_paper.png"></a>
			<a href="#" data-src="bright_squares.png"></a>
			<a href="#" data-src="brushed_alu.png"></a>
			<a href="#" data-src="concrete_wall_2.png"></a>
			<a href="#" data-src="concrete_wall_3.png"></a>
			<a href="#" data-src="white_sand.png"></a>
			<a href="#" data-src="vichy.png"></a>
			<a href="#" data-src="wavecut.png"></a>
			<a href="#" data-src="white_carbon.png"></a>
			<a href="#" data-src="rockywall.png"></a>
			<a href="#" data-src="smooth_wall.png"></a>
			<a href="#" data-src="noisy.png"></a>
			<a href="#" data-src="old_mathematics.png"></a>
			<a href="#" data-src="paper_1.png"></a>
			<a href="#" data-src="paper_2.png"></a>
			<a href="#" data-src="paper_3.png"></a>
			<a href="#" data-src="pinstripe.png"></a>
			<a href="#" data-src="leather_1.png"></a>
			<a href="#" data-src="cork_1.png"></a>
			<a href="#" data-src="double_lined.png"></a>
			<a href="#" data-src="exclusive_paper.png"></a>
			<a href="#" data-src="fabric_1.png"></a>
			<a href="#" data-src="soft_wallpaper.png"></a>
			<a href="#" data-src="subtle_freckles.png"></a>
			<a href="#" data-src="subtle_orange_emboss.png"></a>
			<a href="#" data-src="green_gobbler.png"></a>
			<a href="#" data-src="grunge_wall.png"></a>
			<a href="#" data-src="handmadepaper.png"></a>
		</section>
		
	</div>
	
</div>
<script>
$(function () {
	$(".options a").each(function () {
		$(this).css("background", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization section a").click(function () {
		$(this).parents('section').find('a').removeClass("selected");
		$(this).addClass("selected");
	});
	$("#customization .header_color a").click(function () {
		$("header")
			.css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")")
			.removeClass("header_black")
			.removeClass("header_white")
			.addClass($(this).parent().attr("class"))
		;
	});
	if ($("#showcase").length == 0) $("#customization .showcase_color").css('display', 'none');
	$("#customization .showcase_color a").click(function () {
		$("#showcase").css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization .hide").toggle(function () {
		$("#customization .options").slideUp("slow", function () {
			$("#customization").animate({"margin-left": "-110px"}, "slow");
			$("#customization .hide img").attr("src", "img/show.png");		
		});	
	}, function () {
		$("#customization").animate({"margin-left": "10px"}, "slow", function () {
			$("#customization .options").slideDown("slow");
			$("#customization .hide img").attr("src", "img/hide.png");
		});	
	});
});
</script>

<!-- Google Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2529322-9']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</body>

<!-- Mirrored from creatively.equiet.sk/blogpost.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:09 GMT -->
</html>
